<template>
	<view class="bg">
		<div class="banner">
			<img class="back"
				src="https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/c4dcc5ff-ba8d-4e0a-b4e5-f0687a307eed.png"
				alt="">
			<div class="banner-title">商品管理</div>
		</div>

		<div class="content">
			<div class="content-header">
				<div class="ch-item">
					<img src="" alt="">
					<text>商品体验</text>
				</div>
				<div class="ch-item">
					<img src="" alt="">
					<text>商品审核</text>
				</div>
			</div>
			<div class="tabs">
				<scroll-view scroll-x class="bg-white nav solid-bottom">
					<view class="cu-item flex-sub tab-item" :class="index == TabCur ? 'text-blue cur' : ''"
						v-for="(item, index) in tabs" :key="index" @tap="tabSelect" :data-id="index">
						{{ item.label }}
						<text class="tab-num">{{item.value}}</text>
					</view>
				</scroll-view>
			</div>
			<div class="wrap-content">
				<div class="left-bar">
					<scroll-view scroll-y class="lc-content nav solid-bottom">
						<view class="cu-item left-bar-item" :class="index == leftBarIdx ? 'left-bar-item-select' : ''"
							v-for="(item, index) in left_bar_data" :key="index" @click="leftBarSelect(item, index)"
							:data-id="index">
							{{ item.label }}
						</view>
					</scroll-view>
				</div>
				<div class="right-bar">
					<div class="goods-list" v-for="(item, idx) in goods_data" :key="'go' + idx">
						<img class="item-icon" :src="item.icon" alt="">
						<div class="g-info">
							<div class="gi-title">{{item.name}}</div>
							<div class="gi-code">{{item.code}}</div>
							<div class="gi-count">
								<div class="gi-stock">库存 {{item.stock}}</div>
								<div class="gi-sale">月售 {{item.sale_num}}</div>
							</div>
							<div class="gi-price">
								<text>¥</text>
								{{item.price}}
							</div>
							<div class="gi-btns">
								<div class="gi-btn" @click="clickEdit(item)">编辑</div>
								<div class="gi-btn">价格</div>
								<div class="gi-btn">库存</div>
								<div class="gi-btn">上架</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="bottom">
			<div class="bottom-btn">分类管理</div>
			<div class="bottom-btn">
				<img src="https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/6908c098-0517-4c2f-a67a-b711484cfa83.png"
					alt="">
				新建商品
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TabCur: '',
				leftBarIdx: '', // 左侧点击
				tabs: [{
						label: '全部',
						value: 20
					},
					{
						label: '售卖中',
						value: 15
					},
					{
						label: '已下架',
						value: 5
					},
					{
						label: '已售罄',
						value: 0
					},
					{
						label: '库存告急',
						value: 0
					},
				],
				left_bar_data: [{
						label: '未分类',
						value: 0
					},
					{
						label: '减肥',
						value: 1
					},
					{
						label: '通风尿酸',
						value: 2
					},
					{
						label: '失眠',
						value: 3
					}
				],
				goods_data: [{
					icon: "https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/7cb982d9-4161-47ee-a088-e93e557d0813.png",
					name: "日本武田制药奥米加高级鱼油3DHA Omega-3血液粘稠堵塞高血脂胶囊降血脂降胆固醇降血管黏连硬化",
					code: 'UIPC 1293761279312',
					stock: 30,
					sale_num: 50,
					price: 240,
					id: 12312312
				}, {
					icon: "https://hqtsc.oss-cn-beijing.aliyuncs.com/1/material/7cb982d9-4161-47ee-a088-e93e557d0813.png",
					name: "日本武田制药奥米加高级鱼油3DHA Omega-3血液粘稠堵塞高血脂胶囊降血脂降胆固醇降血管黏连硬化",
					code: 'UIPC 1293761279312',
					stock: 30,
					sale_num: 50,
					price: 240,
					id: 12312312
				}]
			}
		},
		methods: {
			leftBarSelect(item, idx) { // 左侧栏点击
				console.log(item, idx)
				this.leftBarIdx = idx
			},
			tabSelect(e) { // tab 点击
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.mescroll.resetUpScroll();
			},
			clickEdit(item) {
				uni.navigateTo({
					url: '/pages/mall/goodsspu/edit-goods?id=' + item.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bg {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;

		.banner {
			background-color: #FFEA72;
			width: 100%;
			height: 250rpx;
			position: relative;

			image {
				top: 110rpx;
				left: 20rpx;
				position: absolute;
				width: 40rpx;
				height: 40rpx;
			}

			.banner-title {
				font-weight: 500;
				margin-top: 110rpx;
				color: #000;
				font-size: 30rpx;
				text-align: center;
			}
		}
	}

	.content {
		z-index: 1;
		width: 100%;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		background-color: #fff;
		margin-top: -30rpx;

		.content-header {
			display: flex;
			flex-direction: row;
			margin-left: 40rpx;
			margin-top: 40rpx;

			.ch-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					border: 1px solid yellow;
					width: 80rpx;
					height: 80rpx;
				}

				text {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #333;
				}
			}

			.ch-item:last-child {
				margin-left: 40rpx;
			}
		}


	}

	.tab-item {
		font-size: 30rpx;
		font-weight: 500;

		.tab-num {
			font-size: 24rpx;
		}
	}

	.wrap-content {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;

		.lc-content {
			width: 180rpx;
			height: 980rpx;
			display: flex;
			flex-direction: column;
			background-color: #f5f5f5;

			.left-bar-item {
				font-size: 30rpx;
				display: flex;
				flex-direction: row;
				color: #333;
				padding: 0;
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.left-bar-item-select {
				background-color: #fff;
				color: #000;
			}
		}

		.right-bar {
			margin-left: 20rpx;
			margin-top: 20rpx;
			width: 530rpx;

			.goods-list {
				display: flex;
				flex-direction: row;

				.item-icon {
					width: 100rpx;
					height: 100rpx;
				}

				.g-info {
					width: 400rpx;
					margin-left: 20rpx;

					.gi-title {
						color: #000;
						font-size: 28rpx;
						font-weight: 500;
					}

					.gi-code {
						color: #666;
						font-size: 24rpx;
						margin-top: 20rpx;
					}

					.gi-count {
						display: flex;
						flex-direction: row;
						color: #666;
						font-size: 24rpx;
						margin-top: 10rpx;

						.gi-sale {
							margin-left: 100rpx;
						}
					}

					.gi-price {
						text {
							font-size: 24rpx;
							margin-right: 4rpx;
						}

						margin-top: 10rpx;
						color: #D33E59;
						font-size: 30rpx;
						font-weight: 500;
					}

					.gi-btns {
						margin-top: 20rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;

						.gi-btn {
							border-radius: 30rpx;
							padding: 10rpx 22rpx;
							color: #000;
							border: 1px solid #D4D4D4;
							font-size: 24rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}

			.goods-list:not(:first-child) {
				margin-top: 60rpx;
			}
		}
	}

	.bottom {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 690rpx;
		margin-left: 30rpx;

		.bottom-btn {
			border-radius: 40rpx;
			background-color: #FEDF46;
			color: #000;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 330rpx;
			height: 88rpx;
			font-weight: 500;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>